<template>
  <j-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    cancelText="取消"
    wrapClassName="ant-modal-cust-warp"
    style="top:5%;height: 100%;overflow-y: hidden">
    <template slot="footer">
      <a-button key="back" v-if="isReadOnly" @click="handleCancel">
        取消
      </a-button>
      <a-button key="back" @click="handleCancel">关闭</a-button>
    </template>
    <a-spin :spinning="confirmLoading">
    <a-form :form="form">
      <a-form-item label="工程名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
           <a-input  v-decorator.trim="[ 'engineerName', validatorRules.engineerName]"  :read-only="true" />
        </a-form-item>
        <a-form-item label="纳税人信息" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input  v-decorator.trim="[ 'nameA']"  :read-only="true"  />
        </a-form-item>
        <a-form-item label="工程创建时间" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <j-date  v-decorator="['engineerTime', validatorRules.engineerTime]" :read-only="true"/>
        </a-form-item>
         <a-form-item label="合同金额" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input  v-decorator.trim="[ 'engineerMoney', validatorRules.engineerMoney]" suffix="万元" :read-only="true"  />
        </a-form-item>
        <a-form-item label="已开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input  v-decorator.trim="['amounted', validatorRules.amounted]" suffix="万元" :read-only="true"/>
        </a-form-item>
        <a-form-item label="开票金额" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input  v-decorator.trim="[ 'amount', validatorRules.amount]" suffix="万元" :read-only="true"/>
        </a-form-item>
         <a-form-item label="开票批次" :labelCol="labelCol" :wrapperCol="wrapperCol" >
          <a-input  v-decorator.trim="[ 'batch', validatorRules.batch]" :read-only="true" />
        </a-form-item>

        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea :rows="3"  v-decorator="[ 'description' ]" :read-only="true"/>
        </a-form-item>

        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="发票详情">
          <j-image-upload v-model="fileList" bizPath="receipt" text="上传" isMultiple disabled></j-image-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </j-modal>
</template>
<script>
  import pick from 'lodash.pick'
  import Vue from 'vue'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import JDate from '@/components/jeecg/JDate'
  import JUpload from '@/components/jeecg/JUpload'
  import JImageUpload from '@/components/jeecg/JImageUpload'
  import {ReceiptListMixin } from '../mixins/ReceiptListMixin'
  export default {
    name: "ReceiptDetail",
    mixins:[ReceiptListMixin],
    components: {
      JImageUpload,
      JUpload,
      JDate
    },
    data () {
      return {
        title:"操作",
        visible: false,
        modalWidth:800,
        drawerWidth:700,
        fileList:[],
        engineerTimeStr:'',
        model: {},
        id:"", //保存工程id
        isReadOnly: false,
        disableSubmit:false,
        dateFormat:"YYYY-MM-DD",
        validatorRules:{

        },
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        confirmLoading: false,
        headers:{},
        form:this.$form.createForm(this)
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token}
    },
    methods: {
     add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.id = record.id;
        this.visible = true;
        this.model = Object.assign({}, record);
        this.editAfter(this.model);
      },
      editAfter() {
         this.model.engineerTime = this.model.engineerTimeStr
           if(JSON.stringify(this.model) === '{}') {
              this.fileList = []
            } else {
              setTimeout(() => {
                this.fileList = this.model.fileName
              }, 5)
            }
          // this.fileList = this.model.fileName
          this.$nextTick(() => {
            this.form.setFieldsValue(pick(this.model,'engineerName','nameA','engineerTime','engineerMoney','amounted','amount','batch','description'))
          });
      },
      close() {
        this.visible = false;
        this.$emit('close');
        this.disableSubmit = false;
      },
      handleCancel() {
        this.close()
      },
    }
  }
</script>

<style lang="less" scoped>
  @import "chart";
</style>